
<template>
    <el-dialog v-model="visible" title="设置图形链接" width="30%" draggable>
        <el-divider content-position="left">我的文件</el-divider>
        <div>
            <el-row>
                <el-col v-for="i in FileList" :key=i.uuid :span="4" :offset="index > 0 ? 2 : 0">
                    <el-tooltip class="item" effect="light" :content=i.name placement="top" :show-after=500>
                    <el-card v-if="i.uuid == curentSelUUID"
                    style="border:5px solid #007bff;padding:10px;transition:border-color 0.3s ease;"
                     @click="clickCard(i)">
                        <img v-bind:src=i.iconURL class="image" />
                        <div style="padding: 0px">
                            <span>{{ i.disName }}</span>
                        </div>
                    </el-card>
                    <el-card v-if="i.uuid != curentSelUUID"
                    style="border:1px solid #4b4d4e;padding:2px;"
                     @click="clickCard(i)">
                        <img v-bind:src=i.iconURL class="image" />
                        <div style="padding: 0px">
                            <span>{{ i.disName }}</span>
                        </div>
                    </el-card>
                </el-tooltip>
                </el-col>
            </el-row>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
                <el-button type="primary" @click="onConfirm">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const visible = ref(false)
const curentSelUUID = ref('')

let FileList = ref([])

const onConfirm = () => {
  visible.value = false;
  var cmd = { propname: 'xlink', propval: curentSelUUID.value };
  window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}

const clickCard = (item) => {
    console.log(item.uuid);
    curentSelUUID.value = item.uuid;
}
const parseFiles = (fileJsonObjArray) => {
    // console.log("parseFiles---------");
    FileList.value = [];
    for (var i = 0; i < fileJsonObjArray.length; i++) {
        var unitObj = fileJsonObjArray[i];
        let uuid = unitObj["uuid"];
        let name = unitObj["name"];
        let parent = unitObj["parent"];
        let iconURL = unitObj["iconURL"];
        let disName = name;
        if (disName.length > 3) {
            disName = name.substr(0, 3) + "...";
        }
        let newFile = { uuid, name, parent, iconURL, disName };
        FileList.value.push(newFile);
    }
}
const getAllFiles = () => {
    var url = "api/graph/getAll";
    var postObj = { "userid": "" };
    axios.post(url, postObj).then(res => {
        // console.log(res.data);
        parseFiles(res.data);
    }).catch(function (error) {
        console.log(error);
    })
}

onMounted(() => {
    console.log(FileList.value);
    getAllFiles();
    console.log(FileList.value);
})


defineExpose({
    visible,
    onMounted,
    curentSelUUID
});

</script>
  
<style>
.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
    border-radius: 4px;
    border-bottom: 20px;
}

.el-card-common {
    border: 1px solid #ccc; /* 默认边框样式 */
    padding: 10px;
    transition: border-color 0.3s ease; /* 过渡效果 */
  }

  .el-card-selected {
    border: 5px solid #007bff;  /* 选中时的边框颜色 */
    padding: 10px;
    transition: border-color 0.3s ease; /* 过渡效果 */
  }
</style>
  